<template>
  <div class="outer">
    <div class="logoAndText">
      <div class="content">
        <div>Key Laboratory of Molecular Biology on Infectious Diseases,</div>
        <div>Ministry of Education, Chongqing Medical University,</div>
        <div>Chongqing 400016, China</div>
        <div
          class="spanHover"
          style="color: #39b54a; font-weight: 550; font-style: italic"
          @click="router.push('/help')"
        >
          Guidelines
        </div>
      </div>
      <div class="img">
        <img src="@/assets/images/footerLogo1.png" alt="" @click="toPath(1)" />
        <img src="@/assets/images/footerLogo2.png" alt="" @click="toPath(2)" />
      </div>
    </div>
    <div class="menu" style="margin-bottom: 20px">
      <!-- <div class="copyright" style="width: 22%">Copyright © Zhao Lab</div> -->
      <div class="menuItem" style="width: 100%; text-align: center">
        <span v-for="item in menuList" class="spanBox" :key="item"
          ><span class="spanHover" @click="changeMenu(item.path)">{{
            item.name
          }}</span>
          <span v-if="item.name != `Help`"> | </span>
        </span>
      </div>
      <div class="bq" style="text-align: center">
        Copyright © CQMU |
        <span @click="toPath(3)" class="spanHover">渝ICP备2024044855号-2</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
// const menuList = ["Home", "Search", "Data-Browser", "Download", "Help"];
const menuList = [
  {
    name: "Home",
    path: "/",
  },
  {
    name: "Search",
    path: "/search/bacteria",
  },
  {
    name: "Data-Browser",
    path: "/dataBrowse",
  },
  {
    name: "Genome-Browser",
    path: "/jbrowseTable",
  },
  {
    name: "Download",
    path: "/Download",
  },
  {
    name: "Contact",
    path: "/contact",
  },
  {
    name: "Statistics",
    path: "/statistics",
  },
  {
    name: "Help",
    path: "/help",
  },
];
const toPath = (index) => {
  if (index == 1) {
    window.open("https://english.cqmu.edu.cn/", "_blank");
  } else if (index == 2) {
    window.open(
      "https://www.baidu.com/link?url=hmXI5pr9WX_pueuTjDKu2zZDupP7gfR0lBv6x5Pvj5UwOXheaH29zR5hV8A9jpLd&wd=&eqid=bfdaa825008f893e0000000667fe1875",
      "_blank"
    );
  } else if (index == 3) {
    window.open("https://beian.miit.gov.cn/", "_blank");
  }
};
const changeMenu = (path) => {
  router.push(path);
};
</script>
<style scoped lang="scss">
.outer {
  text-align: left;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 1330px;
  margin: 0 auto;
  .content {
    font-size: 18px;
    margin-top: 10px;
    line-height: 25px !important;
  }
  ::v-deep .menu {
    position: absolute;
    left: 22%;
    bottom: 3px;
    .copyright {
      margin-right: 40px;
    }
    .img {
      position: absolute;
      right: 10vw;
      top: 5px;
      img {
        width: 96px;
        height: 96px;
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .menuItem {
      font-size: 16px;
      width: 100%;
      text-align: center;
      .spanBox {
      }
      .spanHover {
        cursor: pointer;
      }
      .spanHover:hover {
        color: #0066c0;
      }
    }
  }
}
.logoAndText {
  display: flex;
  justify-content: space-between;
  img {
    height: 100px;
    width: 100px;
    margin: 15px 20px 10px 10px;
  }
}
.spanHover {
  cursor: pointer;
}
.spanHover:hover {
  color: #0066c0;
}
.bq {
  .spanHover {
    cursor: pointer;
  }
  .spanHover:hover {
    color: #0066c0;
  }
}
</style>
